﻿<UserControl x:Class="Citrix.XaAdminMobile.ViewCommon.SessionsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             FocusVisualStyle="{x:Null}"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:vm="clr-namespace:Citrix.XaAdminMobile.ViewModel"
             xmlns:prop="clr-namespace:Citrix.XaAdminMobile.Properties"
             xmlns:u="clr-namespace:Citrix.XaAdminMobile.Util"
             xmlns:res="clr-namespace:Citrix.XaAdminMobile.Resources"
             xmlns:cmp="clr-namespace:Citrix.Cmp;assembly=Citrix.Cmp.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">

  <UserControl.Resources>

    <cmp:BoolToVisibilityConverter x:Key="BoolVisConverter" />
    <sys:Boolean x:Key="InvertVisibilityConverter">True</sys:Boolean>

    <!-- The default session template. Tapping on a session opens the details pane for this
    session. -->
    <DataTemplate x:Key="DefaultSessionTemplate" DataType="{x:Type vm:SessionViewModel}">
      <Button x:Name="TheButton"
              Style="{DynamicResource ListItemDisplayButtonStyle}" Padding="10,5"
              HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
              Command="{Binding DisplaySessionDetailsCommand}"
              IsEnabled="{Binding IsEnabled}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <!-- Session ID and state -->
            <ColumnDefinition Width="Auto"/>
            <!-- Right arrow -->
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>

          <!-- We display the user account name at the top, with the published app name
          below it, and the server name below that. -->
          <TextBlock x:Name="User" Grid.Column="0" Text="{Binding AccountName}" FontSize="16"/>
          <TextBlock x:Name="App" Grid.Column="0" Grid.Row="1" Text="{Binding BrowserName}" FontSize="12" Foreground="Gray"/>
          <TextBlock x:Name="Server" Grid.Column="0" Grid.Row="2" Text="{Binding ServerName}" FontSize="12" Foreground="Gray"/>

          <!-- The session ID is displayed on the right -->
          <TextBlock x:Name="SessionId" Grid.Column="1" Grid.RowSpan="2" Text="{Binding SessionId}" FontSize="18"
                     VerticalAlignment="Center" HorizontalAlignment="Right"/>

          <!-- Session state. -->
          <TextBlock x:Name="SessionState" Grid.Column="1" Grid.Row="2" Text="{Binding State}" Foreground="Gray" FontSize="12"
                     HorizontalAlignment="Right"/>

          <!-- Right arrow icon -->
          <Path x:Name="ArrowPath" Style="{DynamicResource NextPageArrowStyle}"
                Grid.Column="2" Grid.RowSpan="3"
                Margin="15,0,0,0" VerticalAlignment="Center"/>
        </Grid>
      </Button>
      <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
          <Setter TargetName="User" Property="Foreground" Value="White"/>
          <Setter TargetName="App" Property="Foreground" Value="White"/>
          <Setter TargetName="Server" Property="Foreground" Value="White"/>
          <Setter TargetName="SessionId" Property="Foreground" Value="White"/>
          <Setter TargetName="SessionState" Property="Foreground" Value="White"/>
          <Setter TargetName="ArrowPath" Property="Stroke" Value="White"/>
        </DataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>

    <!-- This template is used to provide a toggle selection mechanism for sessions so the user
    can choose which sessions they want to reset. -->
    <DataTemplate x:Key="ToggleSelectItemTemplate" DataType="{x:Type vm:SessionViewModel}">
      <!-- We use a checkbox to provide a toggle selection mechanism for sessions. -->
      <CheckBox Style="{DynamicResource ChunkyCheckBoxStyle}"
                IsChecked="{Binding IsSelectedForEdit}" IsEnabled="{Binding IsEnabled}"
                Padding="10,5">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>

          <!-- We display the user account name at the top, with the published app name
          below it, and the server name below that. -->
          <TextBlock x:Name="User"  Grid.Column="0" Text="{Binding AccountName}" FontSize="16"/>
          <TextBlock x:Name="App"  Grid.Column="0" Grid.Row="1" Text="{Binding BrowserName}" FontSize="12" Foreground="Gray"/>
          <TextBlock x:Name="Server"  Grid.Column="0" Grid.Row="2" Text="{Binding ServerName}" FontSize="12" Foreground="Gray"/>
          
          <!-- The session ID is displayed on the right -->
          <TextBlock x:Name="SessionId"  Grid.Column="1" Grid.RowSpan="2" Text="{Binding SessionId}" FontSize="18"
                     VerticalAlignment="Center" HorizontalAlignment="Right"/>

          <!-- Session state. -->
          <TextBlock x:Name="SessionState"  Grid.Column="1" Grid.Row="2" Text="{Binding State}" Foreground="Gray" FontSize="12"
                     HorizontalAlignment="Right"/>
        </Grid>
      </CheckBox>
      <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
          <Setter TargetName="User" Property="Foreground" Value="White"/>
          <Setter TargetName="App" Property="Foreground" Value="White"/>
          <Setter TargetName="Server" Property="Foreground" Value="White"/>
          <Setter TargetName="SessionId" Property="Foreground" Value="White"/>
          <Setter TargetName="SessionState" Property="Foreground" Value="White"/>
        </DataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>

    <!-- We use this converter to toggle between our two session data templates. -->  
    <u:DataTemplateToggleConverter
      x:Key="SessionTemplateToggler"
      Alternate="{StaticResource ToggleSelectItemTemplate}" Default="{StaticResource DefaultSessionTemplate}"/>
    
    <!-- The master datatemplate that toggles between the two templates we use. -->
    <DataTemplate DataType="{x:Type vm:SessionViewModel}">
      <ContentPresenter Content="{Binding}" ContentTemplate="{Binding EnableToggleSelect, Converter={StaticResource SessionTemplateToggler}}"/>
    </DataTemplate>
  </UserControl.Resources>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- The master nav toolbar -->
    <ContentPresenter Content="{Binding NavToolbarViewModel}" />

    <!-- Search toolbar. Normally hidden. We show it when the user wants to search the sessions. -->
    <Grid Grid.Row="1" Visibility="{Binding IsSearchModeActive, Converter={StaticResource BoolVisConverter}}">
      <Grid.RowDefinitions>
        <RowDefinition Height="{DynamicResource ToolbarHeight}"/>
        <RowDefinition Height="{DynamicResource ToolbarHeight}"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>

      <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
          <!-- Search input -->
          <ColumnDefinition Width="*"/>
          <!-- Clear input button -->
          <ColumnDefinition Width="Auto"/>
          <!-- Cancel button -->
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <!-- Background colour for input toolbar. -->
        <Rectangle Grid.ColumnSpan="5" Fill="#FFC2C2C2"/>

        <!-- Border to frame the input field. -->
        <Border Grid.Column="0" Grid.ColumnSpan="2" Margin="5" CornerRadius="15" Background="White"/>

        <!-- Search prompt. -->
        <TextBlock Grid.Column="0" Margin="20,0" VerticalAlignment="Center" FontSize="18"
                   Foreground="#FFC2C2C2" Text="{x:Static prop:Resources.SearchPrompt}"
                   Visibility="{Binding HaveNoSearchInputText, Converter={StaticResource BoolVisConverter}, FallbackValue=Visible}"/>

        <!-- Search input -->
        <TextBox x:Name="searchInput" Grid.Column="0" Padding="20,0,0,0" FontSize="18"
                 VerticalAlignment="Stretch" VerticalContentAlignment="Center"
                 Style="{DynamicResource NoBorderTextBoxStyle}"
                 cmp:ClientKeyboardController.AutoShowKeyboard="True"
                 cmp:ClientKeyboardController.AutoHideKeyboard="True"
                 cmp:FocusHelpers.EndOfTextOnFocus="True"
                 IsVisibleChanged="SearchInputTextBox_IsVisibleChanged"
                 KeyUp="SearchInput_KeyUp"
                 Foreground="Black"
                 Text="{Binding SearchInputText, UpdateSourceTrigger=PropertyChanged}"/>

        <!-- Clear input button. -->
        <Button Grid.Column="1" Style="{DynamicResource NakedButtonNoHighlightStyle}"
                Command="{Binding ClearSearchTextCommand}">
          <Grid>
            <!-- Enable hit testing on full button area. -->
            <Rectangle Fill="Transparent"/>

            <!-- Fudged up iPhone style X on a gray circle. -->
            <Border Margin="0,0,5,0" Background="#FFC2C2C2" CornerRadius="12">
              <TextBlock Margin="7,2" Text="X" FontSize="16" FontWeight="Bold"
                         VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
          </Grid>
        </Button>

        <!-- Cancel button. -->
        <Button Grid.Column="3" Style="{DynamicResource PlainButtonStyle}"
                Content="{x:Static prop:Resources.SearchCancelButtonLabel}"
                Command="{Binding CancelSearchCommand}"/>
      </Grid>

      <!-- Displays the controls that allow the user to change what fields are searched on. -->
      <Grid Grid.Row="1" Background="#FFC2C2C2">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <RadioButton FontSize="18" Content="{x:Static prop:Resources.SearchAllLabel}"
                     HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                     Foreground="White" FontWeight="Bold" IsChecked="{Binding IsSearchAllChecked}"
                     Style="{DynamicResource ToolbarRadioButtonStyle}" Checked="RadioButton_Checked"/>
        <RadioButton Grid.Column="1" FontSize="18" Content="{x:Static prop:Resources.SearchUserLabel}"
                     HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                     Foreground="White" FontWeight="Bold" IsChecked="{Binding IsSearchUserNameChecked}"
                     Style="{DynamicResource ToolbarRadioButtonStyle}" Checked="RadioButton_Checked"/>
        <RadioButton Grid.Column="2" FontSize="18" Content="{x:Static prop:Resources.SearchAppNameLabel}"
                     HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                     Foreground="White" FontWeight="Bold" IsChecked="{Binding IsSearchAppNameChecked}"
                     Style="{DynamicResource ToolbarRadioButtonStyle}" Checked="RadioButton_Checked"/>
        <RadioButton Grid.Column="3" FontSize="18" Content="{x:Static prop:Resources.SearchServerLabel}"
                     HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                     Foreground="White" FontWeight="Bold" IsChecked="{Binding IsSearchServerChecked}"
                     Style="{DynamicResource ToolbarRadioButtonStyle}" Checked="RadioButton_Checked"/>
      </Grid>

      <Rectangle Grid.Row="2" Style="{DynamicResource RectangleSeparatorStyle}"/>
    </Grid>


    <!-- Session lists. The first is the master list, the other is the search results. We toggle
    between the two, depending on whether we have a search active. -->
    <ListBox Grid.Row="2" x:Name="SessionList" ItemsSource="{Binding SessionsMaster}"
             Style="{DynamicResource CleanListboxStyle}"
             SelectedItem="{Binding SelectedItem, Mode=OneWay}"
             Visibility="{Binding ShowSearchResults, ConverterParameter={StaticResource InvertVisibilityConverter}, Converter={StaticResource BoolVisConverter}}"/>
    <ListBox Grid.Row="2" x:Name="SearchResults" ItemsSource="{Binding SearchResults}"
             Style="{DynamicResource CleanListboxStyle}"
             SelectedItem="{Binding SelectedItem, Mode=OneWay}"
             Visibility="{Binding ShowSearchResults, Converter={StaticResource BoolVisConverter}}"/>
    
    <!-- Loading status -->
    <res:LoadingStatus Grid.Row="3" DataContext="{Binding LoadingStatus}"/>

    <!-- Popup error status. -->
    <res:ErrorStatusView Grid.Row="4" DataContext="{Binding ErrorStatus}"/>

    <!-- Bottom toolbar. -->
    <Border Grid.Row="5" Style="{DynamicResource ToolbarBorderStyle}">
      <Grid>
        
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!-- Refresh button -->
        <Button Style="{DynamicResource PlainButtonStyle}"
                Content="{x:Static prop:Resources.RefreshSessionsLabel}"
                Command="{Binding RefreshSessionsCommand}"/>

        <!-- Reset button -->
        <Button
          Grid.Column="1" Style="{DynamicResource PlainButtonStyle}" Content="{x:Static prop:Resources.ResetSessionLabel}"
          Command="{Binding ResetSessionsCommand}" Background="{DynamicResource ResetBackground}"
          Visibility="{Binding IsToggleSelectActive, Converter={StaticResource BoolVisConverter}}"/>

        <!-- Edit  button (toggles selection mode). -->
        <Button Grid.Column="2" Style="{DynamicResource PlainButtonStyle}"
                Content="{Binding ToggleSelectionModeLabel}"
                Command="{Binding ToggleSelectionModeCommand}"/>

      </Grid>
    </Border>
    
  </Grid>
</UserControl>
